/**
* 描述：企业注册页面
*/
<style lang="scss" scoped>
  @import 'style/style';
  @import 'src/styles/company/common';
  @import 'src/styles/common';
  @import 'src/styles/icons';
  @import 'src/styles/company/index';
  .fade-enter-active {
    transition: all .5s
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
    transform: rotate( -70deg ) translateX( 300px );
  }
  .avatar-uploader{
    width:70px;
    height: 70px;
    border-radius: 70px;
    background: #f9f9f9;
    padding: 11px 18px;
    margin-left: 30px;
    float: left;
    margin-right:50px;
  }
  .avatar-uploader .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .tips{
    float: left;
    color: #999999;
  }
  .changeBtn{
    width: 330px;height: 50px;font-size: 18px;text-align: center;margin:0 auto;display: block;
  }
  .zc-comLogoUpload{
    width: 70px;
    height: 70px;
    margin:0;
    -moz-border-radius: 70px; /* Firefox */
    -webkit-border-radius: 70px; /* Safari 和 Chrome */
    border-radius: 70px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    behavior: url('/static/style/ie-css3.htc'); /* 通知IE浏览器调用脚本作用于'box'类 */
  }
</style>
<template>
  <div class="main-login" style="overflow-y: auto;">
    <div class="l-login-headerTop">
      <div class="l-inner clearfix">
        <div class="logo fl">
          <img src="/static/images/web/company/wzlogo.png" width="70" height="78" alt="微职">
          <i class="name">微职-最贴心的校园招聘平台</i>
          <div class="clear"></div>
        </div>
        <div class="fr" style="margin-top:32px;">
            <span class="fl">
              <i class="iconCom iconCom_index02"></i>
              <i class="font">政府合作</i>
              <div class="clear"></div>
            </span>
          <span class="fl">
              <i class="iconCom iconCom_index01"></i>
              <i class="font">城市代理</i>
              <div class="clear"></div>
            </span>
          <span class="fl">
                <i class="iconCom iconCom_index03"></i>
                <i class="font">手机微职</i>
                <div class="clear"></div>
            </span>
          <span class="fl">
                <i class="iconCom iconCom_index04"></i>
                <i class="font">企业服务</i>
                <div class="clear"></div>
            </span>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="registerForm cccShadow" v-if="step == 2">
        <!--注册-->
        <div class="register-step">
          <div class="title">个人注册</div>
          <el-form ref="formData" :model="formData" label-width="110px" :rules="rules" @keydown.enter="register()">
            <el-form-item label="手机号" prop="phone">
              <el-input type="text" v-model="formData.phone" placeholder="请输入你常用手机号"></el-input>
            </el-form-item>
            <el-form-item label="密  码" prop="password">
              <el-input type="password" v-model="formData.password" placeholder="密码6-20位，必须同时含有数字、字母"></el-input>
            </el-form-item>
            <el-form-item label="图片验证" prop="captcha">
              <Row>
                <Col span="11"><el-input v-model="captcha" placeholder="请输入图片上的文字"></el-input></Col>
                <Col span="5"><a @click="rndNum()" style="font-size: 12px;margin-top:12px;margin-left:10px;display: block;"> 点击刷新</a></Col>
                <Col span="8">
                  <p><img :src="`/api/pub/captcha.jpg?randKey=${code}`" style="width: 100%"></p>
                </Col>
              </Row>
            </el-form-item>
            <el-form-item label="手机验证码" prop="smsCode">
              <Row>
                <Col span="15">
                  <el-input v-model="formData.smsCode" placeholder="手机验证码"></el-input>
                </Col>
                <Col span="1">&nbsp;
                </Col>
                <Col span="8" style="text-align: right">
                  <Button type="primary" :loading="phoneFunLoading" @click="getSms" style="width: 100%;line-height: 26px;height:40px;">{{fonts}}</Button>
                </Col>
              </Row>
            </el-form-item>
          </el-form>
          <Button type="primary" class="changeBtn" @click="register()">注册</Button>
          <div class="zcTz"><i>已有账号，</i><a href="/login">直接登录 </a><i class="iconCom iconCom_index05"></i><div class="clear"></div></div>
        </div>
      </div>
        <!--完善个人信息-->
    <div class="registerForm cccShadow" v-if="step == 1" style="padding: 20px 130px 20px;">
      <div class="register-step">
        <div class="title" style="display: block;float: left">创建个人信息</div>
        <div class="pop">必填</div>
        <div class="clear"></div>
        <el-form ref="formDataPerfect" :model="formDataPerfect" label-width="0" :rules="formDataPerfectRules">
          <el-form-item label="" prop="name" style="width:200px;float:left;margin-right:20px;">
            <el-input type="text" v-model="formDataPerfect.name" placeholder="真实姓名"></el-input>
          </el-form-item>
          <div class="sexCahnge">
            <span :class="formDataPerfect.sex===1?'cur':''" @click="formDataPerfect.sex=1">男</span>
            <span :class="formDataPerfect.sex===2?'cur':''" @click="formDataPerfect.sex=2">女</span>
            <div class="clear"></div>
          </div>
          <div class="clear"></div>
          <el-form-item label="" prop="name" style="width:200px;float:left;margin-right:20px;">
            <el-date-picker
              v-model="formDataPerfect.birth"
              type="date" format="yyyy-MM-dd"
              placeholder="生日" @on-change="formDataPerfect.birth=$event" :editable="false">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="width:200px;float:left;margin-right:20px;" prop="cityId">
            <el-select v-model="formDataPerfect.cityId" placeholder="所在城市" filterable size="large">
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="clear"></div>
          <el-form-item style="width:420px;float:left;margin-right:20px;" prop="email">
            <el-input type="text" v-model="formDataPerfect.email" placeholder="请输入常用邮箱"></el-input>
          </el-form-item>
          <div class="clear"></div>
        </el-form>
        <Button type="primary" class="changeBtn" @click="nextStep('formDataPerfect')" style="width:200px;float: left;background: #0078ff;">创建</Button>
        <div class="clear"></div>
        <img src="/static/images/web/reg.png" width="331" height="155">
      </div>
    </div>
  </div>
</template>
<script>
  import { mapMutations } from 'vuex';
  import { register, sendSmsCode } from '@/service/web/login/loginService';
  import { district } from '@/service/web/selectService/selectMService';
  export default {
    data () {
      return {
        step: 1,
        isRemember: false,
        showLogin: false,
        phoneFunLoading: false, // 验证码loading
        formData: {},
        formDataPerfect: {
          sex: 1
        },
        picture: null,
        code: '',
        captcha: '',
        isSend: false, // 是否已发送短信验证码
        fonts: '获取短信验证码',
        timeInterval: null, // 获取短信时间倒计时
        second: 60,
        formDataPerfectRules: {
          name: [
            {required: true, message: '真是姓名不能为空', trigger: 'blur change'}
          ],
          birth: [
            {required: true, message: '生日不能为空', trigger: 'blur change'}
          ],
          cityId: [
            {required: true, type: 'number', message: '城市不能为空', trigger: 'blur change'}
          ],
          email: [
            {pattern: '^\\w+([.-]?\\w+)@\\w+([.-]?\\w+)(.\\w{2,3})+$', message: '邮箱格式不对', trigger: 'blur change'}
          ]
        },
        rules: {
          phone: [
            {required: true, message: '手机号不能为空', trigger: 'blur'},
            {pattern: '^(1[3,4,5,6,7,8])\\d{9}$', message: '手机号格式不对', trigger: 'blur change'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur change'},
            {pattern: '^(?![0-9]+$)(?![a-zA-Z]+$)[,.#%’+*-:;^_`0-9A-Za-z]{6,20}$', message: '密码6-20位，必须同时含有数字、字母', trigger: 'blur change'}
          ],
          smsCode: [
            {required: true, message: '手机验证码不能为空！', trigger: 'blur change'}
          ]
        },
        cityList: []
      };
    },
    computed: {
      transition () {
        let transitions = ['slideDown', 'zoomDown', 'bounceDown'];
        let index = this.getRandom(0, transitions.length - 1);
        return transitions[index];
      }
    },
    mounted () {
      this.showLogin = true;
      this.init();
      this.getAllCityList();
    },
    methods: {
      ...mapMutations([
        'LOGIN_IN',
        'USER_INFO'
      ]),
      getRandom (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      },
      init () {
        this.rndNum();
      },
      // 生成随机数 5位 即 随机生成图片
      rndNum () {
        let xxx = Math.random().toString(36).substr(2);
        let aa = xxx.slice(0, 5);
        this.code = aa;
      },
      // 发送短信验证码
      async getSms () {
        try {
          if (!this.formData.phone) {
            this.$message({
              message: '请输入用户名',
              type: 'warning'
            });
            return;
          }
          if (!this.captcha) {
            this.$message({
              message: '请输入图片验证码',
              type: 'warning'
            });
            return;
          }
          this.phoneFunLoading = true;
          await sendSmsCode({phone: this.formData.phone}, {phone: this.formData.phone, randKey: this.code, captcha: this.captcha}); // 获取短信验证码接口
          this.isSend = true;
          this.second = 60;
          this.$message({
            message: '发送成功，请注意查收短信！',
            type: 'success'
          });
          this.timeInterval = setInterval(() => {
            if (this.second === 0) {
              this.fonts = '重新发送';
              this.phoneFunLoading = false;
              clearInterval(this.timeInterval);
              this.rndNum();
              this.code = '';
            } else {
              this.fonts = '剩余' + this.second + '秒';
              this.second = this.second - 1;
            }
          }, 1000);
        } catch (e) {
          this.phoneFunLoading = false;
          this.$message({
            message: e,
            type: 'error'
          });
        }
      },
      // 注册
      async register () {
        try {
          if (!this.formData.phone) {
            this.$message({message: '请输入用户名', type: 'warning'});
            return;
          }
          if (!this.formData.password) {
            this.$message({message: '请输入密码', type: 'warning'});
            return;
          }
          let formData = this._hyTool.deepCopy(this.formData);
          formData = Object.assign(formData, this.formDataPerfect);
          formData.birth = this._hyTool.DateFormat(new Date(formData.birth), 'yyyy-MM-dd hh:mm:ss');
          await register(formData);
          this._hyTool.setCookie('user', JSON.stringify(this.formData));
          this.$message({message: '注册成功，请您重新登录', type: 'success'});
          this.$router.push('/login');
        } catch (e) {}
      },
      // 下一步
      nextStep (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) this.step = 2;
        });
      },
      // 获取全国城市集合
      async getAllCityList () {
        let result = await district({type: 10});
        this.cityList = result.data;
      }
    },
    destoryed: function () {
      clearInterval(this.timeInterval);
    }
  };
</script>
